<template>
  <div>
    <Head title="充电单价" isBack>
      <template #content>
        <div class="detail-wrap">
          <Table
            ref="tableRef"
            :columns="data.columns"
            @get-list="getData"
            :isPagination="false"
          ></Table>
        </div>
      </template>
    </Head>
    <Head
      :title="`应用电桩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前应用电桩数量：${data.total}`"
    >
      <template #content>
        <div class="detail-wrap1">
          <Table
            ref="tableRef1"
            :url="URL_QUERYCOSTTEMPLATEEQUIPMENT"
            :params="{ costTemplateId: id }"
            :columns="data.columns1"
            :query="data.query"
            @get-page="getPage"
          ></Table>
        </div>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Table from '@/components/table/index.vue';
import Head from '@/components/head/index.vue';
import {
  queryCostTemplate,
  URL_QUERYCOSTTEMPLATEEQUIPMENT,
} from '@/service/apis/pile';
import { getPriceList } from '../components/price';

const route = useRoute();
const {
  query: { id },
} = route;
const tableRef = ref();

const setPrice = [
  {
    label: '是',
    value: true,
  },
  {
    label: '否',
    value: false,
  },
];
const data = reactive({
  total: 0,
  columns: [
    {
      prop: 'time',
      label: '时段',
    },
    {
      prop: 'pricePower',
      label: '电费（元/度）',
    },
    {
      prop: 'priceService',
      label: '服务费（元/度）',
    },
  ],
  columns1: [
    {
      prop: 'stationName',
      label: '归属电站',
    },
    {
      prop: 'equipmentCode',
      label: '电桩编码',
    },
    {
      prop: 'isAlonePriceSet',
      label: '是否单桩定价',
      dic: setPrice,
    },
    {
      prop: 'lastCheckPriceTime',
      label: '最新校价时间',
    },
  ],
  query: [
    {
      label: '归属电站',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入归属电站',
      },
    },
    {
      label: '电桩编码',
      prop: 'equipmentCode',
      comName: 'input',
      props: {
        placeholder: '请输入电桩编码',
      },
    },
    {
      label: '是否单桩定价',
      prop: 'isAlonePriceSet',
      comName: 'select',
      props: {
        placeholder: '请选择是否单桩定价',
        options: setPrice,
      },
    },
  ],
});

const getData = (page: any) => {
  queryCostTemplate({ id: id }).then((res: any) => {
    if (res) {
      console.log('res---', res);
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page);
        return;
      }
      nextTick(() => {
        let arr = getPriceList(res);
        tableRef.value?.setTable({
          total: arr.length,
          table: arr,
        });
      });
    }
  });
};

const getPage = (total: number) => {
  data.total = total || 0;
};
</script>